<template>
	<view>
		<view class="content">
			<view class="uni-padding-wrap uni-common-mt">
				<view class="text" v-for="(item,index) in data" :key="index" @click="toDetail(item.id)">{{item.title}}</view>
				<view class="uni-loadmore loading" v-if="showLoadMore">{{loadMoreText}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uniList from "../../common/uni-list/uni-list.vue"
	import uniListItem from "../../common/uni-list-item/uni-list-item.vue"
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				title: '下拉刷新 + 加载更多',
				data: [],
				total:0,
				pages:0,
				loadMoreText: "加载中...",
				showLoadMore: false,
				max: 0
			}
		},
		onLoad() {
			this.initData();
		},
		onUnload() {
			this.max = 0,
				this.data = [],
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
		},
		onReachBottom() {
			console.log("onReachBottom");
			if (this.data.length >= this.total) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}
			this.showLoadMore = true;
			setTimeout(() => {
				this.setListData();
			}, 300);
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		methods: {
			//详情页
			toDetail(val){
				uni.navigateTo({
					url:`../detail/detail?id=${val}`
				})
			},
			//获取数据
			getData() {
				uni.request({
					url: 'http://localhost:3030/msbd/list',
					method: 'get',
					data: {
						pages:this.pages
					},
					success: (res) => {
						this.data=this.data.concat(res.data.data)
						this.total=res.data.total
						console.log(res.data)
					}
				})
			},
			initData() {
				setTimeout(() => {
					this.page = 0;
					this.data = [];
					this.getData()
					uni.stopPullDownRefresh();
				}, 300);
			},
			setListData() {
				this.getData()
			}
		}
	}
</script>

<style>
	.text {
		margin: 16rpx 0;
		width: 90%;
		background-color: #fff;
		height: 120rpx;
		line-height: 120rpx;
		text-align: left;
		padding-left: 10%;
		color: #555;
		border-radius: 8rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.content {
		background-color: #f2f2f2;
	}

	.loading {
		text-align: center;
	}
</style>
